<template>
<el-container style="height: 100%;">
    <el-aside :width="$store.state.Aside.isCollapse ? '64px' : '180px'"><common-aside/></el-aside>
    <el-container>
        <el-header style="height: 50px;"><common-header/></el-header>
        <common-tag/>
        <el-main>
            <router-view v-slot="{ Component }">
                <transition name="main" mode="out-in" appear>
                    <component :is="Component"/>
                </transition>
            </router-view>
        </el-main>
    </el-container>
</el-container>
</template>
<script>
import CommonHeader from '../components/CommonHeader/index.vue'
import CommonAside from '../components/CommonAside/index.vue'
import CommonTag from '../components/CommonTag/index.vue'
import { useStore } from 'vuex'
import { reactive, toRefs, onBeforeMount, onMounted, defineComponent } from 'vue'
export default defineComponent({
    name: 'Main',
    components:{ CommonHeader, CommonAside, CommonTag },
    setup() {
        const store = useStore()
        const data = reactive({
            
        })
        onBeforeMount(() => {
            // 组件挂载页面之前执行
        })
        onMounted(() => {
            // 组件挂载到页面之后执行
            let timer = null
            function sizeFunc(){ // 更新窗口宽度函数，带防抖
                if(timer) clearTimeout(timer)
                timer = setTimeout(() => {
                    const width = document.documentElement.clientWidth
                    store.commit('WINDOWWIDTH', width)
                }, 300);
            }
            sizeFunc()
            window.addEventListener('resize', ()=>{ // 监视窗口宽度
                sizeFunc()
            })
        })
        return {
            ...toRefs(data),
        }
    },
})

</script>

<style scoped>
.el-aside{
    transition: 0.33s;
}
</style>

<style>
.main-enter-active{
    animation: enter 0.4s;
}
.main-leave-active{
    animation: leave 0.4s;
}
@keyframes enter {
	0%{
        transform: translateX(100px);
        opacity: 0;
	}
	100%{
		transform: translateX(0);
        opacity: 1;
	}
}
@keyframes leave {
	0%{
        transform: translateX(0);
        opacity: 1;
	}
	100%{
		transform: translateX(-100px);
        opacity: 0;
	}
}
</style>